<template>
  <div>
    <Slotc :data1="list1" :col="color">
      <template v-slot:header> LIST1 </template>
      <template v-slot:main="obj">
        <button @click="del(obj.num)">删除</button>
        <button @click="add">增加</button>
      </template>
    </Slotc>
    <Slotc :data1="list2">
      <template v-slot:header> LIST2 </template>
      <template v-slot:main="obj">
        <button @click="del2(obj.num)">删除</button>
      </template>
    </Slotc>
  </div>
</template>
<script>
import Slotc from "./06zuoye/Slot.vue/Slot2.vue";
export default {
  components: {
    Slotc,
  },
  data() {
    return {
      list1: [1, 2, 3, 4, 5],
      list2: ["a", "b", "c", "d", "e"],
      color: "pink",
    };
  },
  created() {},
  computed: {},
  methods: {
    add() {
      this.list1.push(Date.now());
    },
    del(id) {
      this.list1.splice(id, 1);
    },
    del2(index) {
      this.list2.splice(index, 1);
    },
  },
};
</script>
<style lang='less'  scoped>
</style>
